<script setup>
import axios from "axios";
import { reactive } from 'vue';
const data = reactive({
  datemessage: ""
})
axios.get('https://tenapi.cn/v2/yiyan').then(response => {
  console.log("每日一言", response.data)
  data.datemessage = response.data
  console.log("赋值为:", data.datemessage);
}).catch(error => {
  console.log("get.error:", error)
}).finally(() => {
  console.log("get.finally")
})

</script>

<template>
  <div class="bgc">
    <div class="title">
      <h1>欢迎来到商店后台管理系统</h1>
      <p>每日一言：{{ data.datemessage }}</p>
    </div>
  </div>


</template>

<style scoped>
.bgc {
  height: 100%;
  width: 100%;
  background-image: url(../../img/bgc.jpg);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-color: #f6f6f6;
}

.title {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* height: 100%; */
  height: 300px;
  flex-wrap: wrap;

}

.title>h1 {
  font-size: 2rem;
  width: 100%;
  text-align: center;
}

.title>p {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 60%;

}
</style>